<template>
  <div class="relative">
    <n-input
      v-model:value="searchQuery"
      placeholder="搜索 AI 工具..."
      size="large"
      round
      clearable
      class="search-input"
    >
      <template #prefix>
        <n-icon :component="SearchIcon" />
      </template>
    </n-input>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NInput, NIcon } from 'naive-ui'
import { Search as SearchIcon } from 'lucide-vue-next'
import { useAppStore } from '@/stores/useAppStore'

const appStore = useAppStore()

const searchQuery = computed({
  get: () => appStore.searchQuery,
  set: (value) => appStore.setSearchQuery(value)
})
</script>

<style scoped>
.search-input :deep(.n-input) {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-input :deep(.n-input:hover),
.search-input :deep(.n-input:focus) {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.search-input :deep(.n-input-el) {
  color: rgba(255, 255, 255, 0.9);
}

.search-input :deep(.n-input-placeholder) {
  color: rgba(255, 255, 255, 0.5);
}
</style>